<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不凡学院</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/style750.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/index.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <!-- 头部 -->
    <header id = 'top'>
        <div class="header_center">
            <section class="header_l">
                <img src="images/LOGO.png" alt="">
            </section>
            <section class="header_r">
                <ul>
                    <li>首页</li>
                    <li>前端开发</li>
                    <li>ui设计</li>
                    <li>不凡说</li>
                    <li>导航</li>
                </ul>
                <i class="iconfont icon-daohang"></i>
            </section>
        </div>
    </header>
    <!-- banner轮播图 -->
    <div class="banner">
        <div class="banner_center">
            <div class="swiper mySwiper my1">
                <div class="swiper-wrapper">
                  <div class="swiper-slide"><img data-lazy-src="images/banner1.jpg"></div>
                  <div class="swiper-slide"><img src="images/banner-2.jpg"></div>
                  <div class="swiper-slide"><img src="images/banner-3.jpg"></div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
              </div>
        </div>
    </div>
    <!-- 不凡优势 -->
    <div class="advantage">
        <div class="advantage_center">
            <section class="advantage_tit">不凡优势</section>
            <div class="advantage_content">
                <section class="advantage_items">
                  <img data-lazy-src="images/super_1.png" alt="" class="advantage_bg">
                  <section class="advantage_small">
                    <section class="advantage_small_items">
                      <img src="images/super-1.png" class="small_bg1">
                      <img src="icons/icon-1.png" class="small_bg2">
                    </section>
                    <section class="advantage_small_items small_items_2">
                      <section class="small_tit">精品小班</section>
                      <section class="small_txt">全程线下面授</section>
                    </section>
                  </section>
                </section>
                <section class="advantage_items">
                  <img data-lazy-src="images/super_2.png" alt="" class="advantage_bg">
                  <section class="advantage_small">
                    <section class="advantage_small_items">
                      <img src="images/super-2.png" class="small_bg1">
                      <img src="icons/icon-2.png" class="small_bg2">
                    </section>
                    <section class="advantage_small_items small_items_2">
                      <section class="small_tit">实战项目</section>
                      <section class="small_txt">6个实战项目</section>
                    </section>
                  </section>
                </section>
                <section class="advantage_items">
                  <img data-lazy-src="images/super_3.png" alt="" class="advantage_bg">
                  <section class="advantage_small">
                    <section class="advantage_small_items">
                      <img src="images/super-3.png" class="small_bg1">
                      <img src="icons/icon-3 (1).png" class="small_bg2">
                    </section>
                    <section class="advantage_small_items small_items_2">
                      <section class="small_tit">真实就业</section>
                      <section class="small_txt">就业率90%</section>
                    </section>
                  </section>
                </section>
                <section class="advantage_items">
                  <img data-lazy-src="images/super_4.png" alt="" class="advantage_bg">
                  <section class="advantage_small">
                    <section class="advantage_small_items">
                      <img src="images/super-4.png" class="small_bg1">
                      <img src="icons/icon-4.png" class="small_bg2">
                    </section>
                    <section class="advantage_small_items small_items_2">
                      <section class="small_tit">学习保障</section>
                      <section class="small_txt">签订协议书</section>
                    </section>
                  </section>
                </section>
            </div>
        </div>
    </div>
    <!-- 课程介绍 -->
    <div class="introduce">
      <div class="introduce_center">
        <section class="introduce_tit">课程介绍</section>
        <div class="introduce_content">
          <section class="introduce_items">
            <section class="introduce_items_1">
              <section class="introduce_contxt">
                <p class="introduce_contxt_p1">Ui<span>设计</span></p>
                <p class="introduce_contxt_p2">点击查看</p>
              </section>
            </section>
            <section class="introduce_items_1">
              <img data-lazy-src="images/introduce_img1.gif" alt="">
            </section>
          </section>
          <section class="introduce_items">
            <section class="introduce_items_1">
              <section class="introduce_contxt">
                <p class="introduce_contxt_p1">Web<span>开发</span></p>
                <p class="introduce_contxt_p2">点击查看</p>
              </section>
            </section>
            <section class="introduce_items_1">
              <img data-lazy-src="images/introduce_img2.gif" alt="" class="introduce_web_img">
            </section>
          </section>
        </div>
      </div>
    </div>
    <!-- 不凡  -->
    <div class="understand">
      <div class="understand_content">
          <div class="understand_items understand_l">
            <section><img data-lazy-src="images/4.png" alt="" ></section>
            <section><img data-lazy-src="images/2.jpg" alt=""></section>
            <section><img data-lazy-src="images/3.png" alt=""></section>
            <section><img data-lazy-src="images/1.jpg" alt=""></section>
          </div>
          <div class="understand_items understand_r">
            <div class="swiper mySwiper my1">
              <div class="swiper-wrapper hidden">
                <div class="swiper-slide"><img data-lazy-src="images/img5.jpg"></div>
                <div class="swiper-slide"><img data-lazy-src="images/img6.jpg"></div>
                <div class="swiper-slide"><img src="images/img4.jpg"></div>
                <div class="swiper-slide"><img src="images/img3.jpg"></div>
                <div class="swiper-slide"><img src="images/img2.jpg"></div>
                <div class="swiper-slide"><img src="images/img1.jpg"></div>
              </div>
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
            </div>
          </div>
      </div>
    </div>
    <!-- 免费公开课 -->
    <div class="free">
      <div class="free_center">
        <section class="free_tit">
          <section class="free_txt">免费公开课</section>
          <!-- 导航按钮 -->
          <section class="free_nav">
            <span class="free_btn change" >全部</span>
            <span class="free_btn">ui设计</span>
            <span class="free_btn">前端开发</span>
          </section>
        </section>
        <!-- 导航的盒子 -->
        <div class="free_content">
          <div class="free_items free_whole">
              <div class="free_items_content">
                <section class="free_items_1">
                  <img data-lazy-src="images/free1.jpg" alt="">
                  <p>web前端做什么？</p>
                  <span>主讲老师：丁老师</span>
                </section>
                <section class="free_items_1">
                  <img data-lazy-src="images/free1_2.jpg" alt="">
                  <p>HTML+CSS - 最新教程</p>
                  <span>主讲老师：张老师</span>
                </section>
                <section class="free_items_1">
                  <img data-lazy-src="images/free1_3.jpg" alt="">
                  <p>vue全家桶</p>
                  <span>主讲老师：董老师</span>
                </section>
                <section class="free_items_1">
                  <img data-lazy-src="images/free1_4.jpg" alt="">
                  <p>UI-零基础到入门精通</p>
                  <span>主讲老师：费老师</span>
                </section>
              </div>
          </div>
          <div class="free_items free_ui">
            <div class="free_items_content">
              <section class="free_items_1">
                <img data-lazy-src="images/free2.jpg" alt="">
                <p>UI-零基础到入门精通系列教程</p>
                <span>主讲老师：费老师</span>
              </section>
              <section class="free_items_1">
                <img data-lazy-src="images/free2_2.jpg" alt="">
                <p>C4D-系列教程</p>
                <span>主讲老师：费老师</span>
              </section>
              <section class="free_items_1">
                <img data-lazy-src="images/free2_3.jpg" alt="">
                <p>AE-系列教程</p>
                <span>主讲老师：崔老师</span>
              </section>
              <section class="free_items_1">
                <img data-lazy-src="images/free2_4.jpg" alt="">
                <p>Figma-系列教程</p>
                <span>主讲老师：闫老师</span>
              </section>
            </div>
          </div>
          <div class="free_items free_web">
            <div class="free_items_content">
              <section class="free_items_1">
                <img data-lazy-src="images/free3.jpg" alt="">
                <p>HTML+CSS基础_入门基础教程</p>
                <span>主讲老师：张老师</span>
              </section>
              <section class="free_items_1">
                <img data-lazy-src="images/free3_2.jpg" alt="">
                <p>javaScript进阶</p>
                <span>主讲老师：赵老师</span>
              </section>
              <section class="free_items_1">
                <img data-lazy-src="images/free3_3.jpg" alt="">
                <p>微信小程序</p>
                <span>主讲老师：朱老师</span>
              </section>
              <section class="free_items_1">
                <img data-lazy-src="images/free3_4.jpg" alt="">
                <p>实战_乐居商城</p>
                <span>主讲老师：金龙老师</span>
              </section>
            </div>
          </div>
        </div>        
      </div>
    </div>
    <!-- 学员就业 -->
    <div class="student">
      <div class="student_center">
        <section class="student_tit">学员就业</section>
        <div class="student_content">
          <div class="swiper mySwiper my3">
            <div class="swiper-wrapper">
              <!-- 1 -->
              <div class="swiper-slide my3_items">
                <img data-lazy-src="images/student_1.jpg" alt="">
                <section class="students">
                  <p>入职公司：杭州网易 8k</p>
                  <p>姓名：18-09期入职网易实习</p>
                  <p>职位：Ui设计师实习岗位</p>
                  <p>学历：本科/工业设计</p>
                </section>
              </div>
                <!-- 2 -->
                <div class="swiper-slide my3_items">
                  <img data-lazy-src="images/student_2.jpg" alt="">
                  <section class="students">
                    <p>入职公司：京东 12K</p>
                    <p>姓名：京东</p>
                    <p>职位：前端工程师</p>
                    <p>学历：本科/印刷技术</p>
                  </section>
                </div>
                  <!-- 3 -->
              <div class="swiper-slide my3_items">
                <img data-lazy-src="images/student_3.jpg" alt="">
                <section class="students">
                  <p>入职公司：360 16K</p>
                  <p>姓名：360</p>
                  <p>职位：UI设计</p>
                  <p>学历：本科/工业设计</p>
                </section>
              </div>
                <!-- 4 -->
                <div class="swiper-slide my3_items">
                  <img data-lazy-src="images/student_4.jpg" alt="">
                  <section class="students">
                    <p>入职公司：京东 14K</p>
                    <p>姓名：京东2</p>
                    <p>职位：UI设计</p>
                    <p>学历：本科/工商管理</p>
                  </section>
                </div>
                  <!-- 5 -->
              <div class="swiper-slide my3_items">
                <img data-lazy-src="images/student_5.jpg" alt="">
                <section class="students">
                  <p>入职公司：百度 14K</p>
                  <p>姓名：百度</p>
                  <p>职位：前端工程师</p>
                  <p>学历：本科/机械工程</p>
                </section>
              </div>
                <!-- 6 -->
                <div class="swiper-slide my3_items">
                  <img data-lazy-src="images/student_6.jpg" alt="">
                  <section class="students">
                    <p>入职公司：去哪儿网 16K</p>
                    <p>姓名：去哪儿</p>
                    <p>职位：前端工程师</p>
                    <p>学历：本科/视觉传达</p>
                  </section>
                </div>
                  <!-- 7 -->
              <div class="swiper-slide my3_items">
                <img data-lazy-src="images/student_7.jpg" alt="">
                <section class="students">
                  <p>入职公司：新浪微博 15K</p>
                  <p>姓名：新浪</p>
                  <p>职位：UI设计</p>
                  <p>学历：本科/市场营销</p>
                </section>
              </div>
                <!-- 8 -->
                <div class="swiper-slide my3_items">
                  <img data-lazy-src="images/student_8.jpg" alt="">
                  <section class="students">
                    <p>入职公司：中软国际 7k</p>
                    <p>姓名：1907期学员-黄*超</p>
                    <p>职位：前端工程师</p>
                    <p>学历：本科/计算机</p>
                  </section>
                </div>
                  <!-- 9 -->
              <div class="swiper-slide my3_items">
                <img data-lazy-src="images/student_9.jpg" alt="">
                <section class="students">
                  <p>入职公司：杭州同花顺 10k</p>
                  <p>姓名：1904期学员-安*鹰</p>
                  <p>职位：前端工程师</p>
                  <p>学历：本科/电子信息工程</p>
                </section>
              </div>
                <!-- 10 -->
                <div class="swiper-slide my3_items">
                  <img data-lazy-src="images/student_10.jpg" alt="">
                  <section class="students">
                    <p>入职公司：大山外语 6.5K</p>
                    <p>姓名：18-06期学员-王*萌</p>
                    <p>职位：UI设计师</p>
                    <p>学历：专科/轨道工程</p>
                  </section>
                </div>
                  <!-- 11 -->
              <div class="swiper-slide my3_items">
                <img data-lazy-src="images/student_11.jpg" alt="">
                <section class="students">
                  <p>入职公司：有缘网 14K</p>
                  <p>姓名：入职公司：有缘网</p>
                  <p>职位：UI设计</p>
                  <p>学历：本科/视觉传达</p>
                </section>
              </div>
                <!-- 12 -->
                <div class="swiper-slide my3_items">
                  <img data-lazy-src="images/student_12.jpg" alt="">
                  <section class="students">
                    <p>入职公司：浙江东驰 10k</p>
                    <p>姓名：1901期学员-*浩</p>
                    <p>职位：前端工程师</p>
                    <p>学历：本科/土木工程</p>
                  </section>
                </div>
            </div>
          </div>
        </div>
        <!-- 手机端展示解决方案 复制一份 绑定新的类名 swiper设置展示1个  -->
        <div class="student_content student_content_app ">
          <div class="swiper mySwiper my3 my3_app">
            <div class="swiper-wrapper">
              <!-- 1 -->
              <div class="swiper-slide my3_items">
                <img data-lazy-src="images/student_1.jpg" alt="">
                <section class="students">
                  <p>入职公司：杭州网易 8k</p>
                  <p>姓名：18-09期入职网易实习</p>
                  <p>职位：Ui设计师实习岗位</p>
                  <p>学历：本科/工业设计</p>
                </section>
              </div>
                <!-- 2 -->
                <div class="swiper-slide my3_items">
                  <img data-lazy-src="images/student_2.jpg" alt="">
                  <section class="students">
                    <p>入职公司：京东 12K</p>
                    <p>姓名：京东</p>
                    <p>职位：前端工程师</p>
                    <p>学历：本科/印刷技术</p>
                  </section>
                </div>
                  <!-- 3 -->
              <div class="swiper-slide my3_items">
                <img data-lazy-src="images/student_3.jpg" alt="">
                <section class="students">
                  <p>入职公司：360 16K</p>
                  <p>姓名：360</p>
                  <p>职位：UI设计</p>
                  <p>学历：本科/工业设计</p>
                </section>
              </div>
                <!-- 4 -->
                <div class="swiper-slide my3_items">
                  <img data-lazy-src="images/student_4.jpg" alt="">
                  <section class="students">
                    <p>入职公司：京东 14K</p>
                    <p>姓名：京东2</p>
                    <p>职位：UI设计</p>
                    <p>学历：本科/工商管理</p>
                  </section>
                </div>
                  <!-- 5 -->
              <div class="swiper-slide my3_items">
                <img data-lazy-src="images/student_5.jpg" alt="">
                <section class="students">
                  <p>入职公司：百度 14K</p>
                  <p>姓名：百度</p>
                  <p>职位：前端工程师</p>
                  <p>学历：本科/机械工程</p>
                </section>
              </div>
                <!-- 6 -->
                <div class="swiper-slide my3_items">
                  <img data-lazy-src="images/student_6.jpg" alt="">
                  <section class="students">
                    <p>入职公司：去哪儿网 16K</p>
                    <p>姓名：去哪儿</p>
                    <p>职位：前端工程师</p>
                    <p>学历：本科/视觉传达</p>
                  </section>
                </div>
                  <!-- 7 -->
              <div class="swiper-slide my3_items">
                <img data-lazy-src="images/student_7.jpg" alt="">
                <section class="students">
                  <p>入职公司：新浪微博 15K</p>
                  <p>姓名：新浪</p>
                  <p>职位：UI设计</p>
                  <p>学历：本科/市场营销</p>
                </section>
              </div>
                <!-- 8 -->
                <div class="swiper-slide my3_items">
                  <img data-lazy-src="images/student_8.jpg" alt="">
                  <section class="students">
                    <p>入职公司：中软国际 7k</p>
                    <p>姓名：1907期学员-黄*超</p>
                    <p>职位：前端工程师</p>
                    <p>学历：本科/计算机</p>
                  </section>
                </div>
                  <!-- 9 -->
              <div class="swiper-slide my3_items">
                <img data-lazy-src="images/student_9.jpg" alt="">
                <section class="students">
                  <p>入职公司：杭州同花顺 10k</p>
                  <p>姓名：1904期学员-安*鹰</p>
                  <p>职位：前端工程师</p>
                  <p>学历：本科/电子信息工程</p>
                </section>
              </div>
                <!-- 10 -->
                <div class="swiper-slide my3_items">
                  <img data-lazy-src="images/student_10.jpg" alt="">
                  <section class="students">
                    <p>入职公司：大山外语 6.5K</p>
                    <p>姓名：18-06期学员-王*萌</p>
                    <p>职位：UI设计师</p>
                    <p>学历：专科/轨道工程</p>
                  </section>
                </div>
                  <!-- 11 -->
              <div class="swiper-slide my3_items">
                <img data-lazy-src="images/student_11.jpg" alt="">
                <section class="students">
                  <p>入职公司：有缘网 14K</p>
                  <p>姓名：入职公司：有缘网</p>
                  <p>职位：UI设计</p>
                  <p>学历：本科/视觉传达</p>
                </section>
              </div>
                <!-- 12 -->
                <div class="swiper-slide my3_items">
                  <img data-lazy-src="images/student_12.jpg" alt="">
                  <section class="students">
                    <p>入职公司：浙江东驰 10k</p>
                    <p>姓名：1901期学员-*浩</p>
                    <p>职位：前端工程师</p>
                    <p>学历：本科/土木工程</p>
                  </section>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  <!-- 不凡说 -->
  <div class="bfsay">
    <div class="bfsay_center">
      <section class="bfsay_tit">不凡说</section>
      <div class="bfsay_content">
        <div class="bfsay_items">
          <a href="script:;"><img data-lazy-src="images/bfsay_1.jpg"></a>
          <p class="bfsay_txt">VUE实现动态给对象或数组增加新属性</p>
          <p class="bfsay_time">&nbsp;2022年04月14日</p>
        </div>
        <div class="bfsay_items">
          <a href="script:;"><img data-lazy-src="images/bfsay_2.jpg"></a>
          <p class="bfsay_txt">小程序中常见的插件使用</p>
          <p class="bfsay_time">&nbsp;2022年04月08日 </p>
        </div>
        <div class="bfsay_items">
          <a href="script:;"><img data-lazy-src="images/bfsay_3.jpg"></a>
          <p class="bfsay_txt">移动端适配</p>
          <p class="bfsay_time">&nbsp;2022年03月18日 </p>
        </div>
        <div class="bfsay_items">
          <a href="script:;"><img data-lazy-src="images/bfsay_4.jpg"></a>
          <p class="bfsay_txt">font-family 属性详解</p>
          <p class="bfsay_time">&nbsp;2022年04月09日 </p>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部 -->
  <footer>
    <div class="footer_center">
      <!-- first-child -->
      <div class="footer_items">
        <section class="footer_items_1">
          <p class="footer_tit">地址：</p>
          <p class="footer_txt">郑州市-中原西路(中原万达)-和昌大厦11层</p>
        </section>
        <section class="footer_items_1">
          <p class="footer_tit">微信号：</p>
          <p class="footer_txt">bufanxueyuan</p>
        </section>
        <section class="footer_items_1">
          <p class="footer_tit">电话：</p>
          <p class="footer_txt">18838180363<br><span>(周一至周日 9:00 - 6:30 )</span></p>
        </section>
        <section class="footer_items_1">
          <p class="footer_tit">QQ：</p>
          <p class="footer_txt">3581997982</p>
        </section>
      </div>
      <!-- last-child -->
      <div class="footer_items">
        <p class="footer_web"><span>前端/UI</span> 扫码咨询/报名</p>
        <img data-lazy-src="images/footer_1.png" alt="">
      </div>
    </div>
  </footer>
  <!-- 友情链接 -->
  <div class="link">
    <div class="link_center">
      <section class="link_items">
        友情链接:
        <a href="script:;">&nbsp;不凡文档系统</a>
        <a href="script:;">&nbsp;gitee代码仓库</a>
        <a href="script:;">&nbsp;bilibili</a>
        <a href="script:;">&nbsp;花瓣</a>
        <a href="script:;">&nbsp;github</a>
      </section>
      <section class="link_items">
        Copyright© 2017-2023 不凡学院 豫ICP备 17015347号-1
      </section>
    </div>
  </div>
  <!-- 点我咨询 -->
  <div class="service">
    <a href="#top">回到顶部</a>
  </div>
  <script src="js/EasyLazyload.min.js"></script>
  <script>
    // 图片懒加载
    lazyLoadInit({
        showTime:666,
        onLoadBackEnd:function(i,e){
            console.log("onLoadBackEnd:"+i);
        }
        ,onLoadBackStart:function(i,e){
            console.log("onLoadBackStart:"+i);
        }
    });
</script>
</body>
</html>